<!DOCTYPE HTML>
<!--
This is a regression test for crbug.com/666259 .

It renders transparent green (0,255,0,0) into a canvas with
{alpha:false, preserveDrawingBuffer:false}, over a <div> with a CSS
background-color of red (#f00). Specifically, it does this while triggering an
implicit clear (due to the preserveDrawingBuffer:false setting).

This should result in a green (0,255,0) triangle on a black (0,0,0) background
with a red (255,0,0) box behind it.

Previously this was incorrectly blended on Mac (w/ IOSurface) and the result
would have been yellow (255,255,0). The implicit clear was clobbering the alpha
channel of the canvas (which should be impossible with alpha:false).
-->

<html>
<head>
<title>WebGL Test: Transparent Green Triangle over Red Background</title>
<style type="text/css">
.nomargin {
  margin: 0px auto;
}
</style>

<script src="pixel_webgl_util.js"></script>

<script>
// Overwrite the vertexShader and fragmentShader created by pixel_webgl_util.
window.vertexShader = [
  "attribute vec3 pos;",
  "void main(void)",
  "{",
  "  gl_Position = vec4(pos, 1.0);",
  "}"
].join("\n");

window.fragmentShader = [
  "precision mediump float;",
  "void main(void)",
  "{",
  "  gl_FragColor = vec4(0.0, 1.0, 0.0, 0.0);",
  "}"
].join("\n");

function waitForComposite(callback) {
  var frames = 5;
  var countDown = function() {
    if (frames == 0) {
      callback();
    } else {
      --frames;
      window.requestAnimationFrame(countDown);
    }
  };
  countDown();
};

function main() {
  var canvas = document.getElementById("c");
  var gl = initGL(canvas, false, false);
  if (gl && setup(gl)) {
    waitForComposite(function() {
      gl.drawArrays(gl.TRIANGLES, 0, 3);
      domAutomationController.send("SUCCESS");
    });
  } else {
    domAutomationController.send("FAILURE");
  }
}
</script>
</head>
<body onload="main()">
<div style="position:relative; width:200px; height:200px; background-color:#f00"></div>
<div style="position:absolute; top:0px; left:0px">
<canvas id="c" width="200" height="200" class="nomargin"></canvas>
</div>
</body>
</html>
